<template>
    <div class="app-container">
      查询表单
      <!-- 漏洞名称 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="informationQuery.name" placeholder="漏洞名称名"/>
        </el-form-item>
  <!-- 漏洞危险等 -->
        <el-form-item>
          <el-select v-model="informationQuery.severity" clearable placeholder="漏洞危险等级">
            <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
          </el-select>
        </el-form-item>
  
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form>
      
      <!-- 表格 -->
      <el-table
        :data="list1"
        border
        fit
        highlight-current-row>
  
       <el-table-column
          label="序号"
          width="70"
          align="center">
          <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
          </template>
        </el-table-column> 
        <el-table-column prop="vulnType" label="漏洞类型" width="60" />

        <el-table-column prop="published" label="发布时间" width="100"/>
  
  <el-table-column prop="modified" label="修改时间" width="100" />
  
        <el-table-column prop="name" label="名称" width="160"/>
  
  
        <el-table-column prop="vulnId" label="vulnId" width="160"/>
  
       
  
        <el-table-column prop="vulnDescript" label="漏洞描述" width="500" align="center" />
  
        <el-table-column prop="severity" label="漏洞等级" width="60" />
  
       
  
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <router-link :to="'/form/edit/'+scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
            </router-link>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table> 
  
    <!-- 分页 -->
       <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="list.totalElements"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
      />  
  
    </div>
  </template>
  <script>
  //引入调用js文件
  import information from '@/api/edu/infose'
  import informationApi from '@/api/edu/infoData'
  export default {
      //写核心代码位置
      // data:{
      // },
      data() { //定义变量和初始值
          return {
            options: [{
            value: '超危',
            label: '超危'
          }, {
            value: '高危',
            label: '高危'
          },  {
            value: '中危',
            label: '中危'
          }],
          value: '',
            list:null,//查询之后接口返回集合
            list1:null,
            page:1,//当前页
            limit:10,//每页记录数
            total:0,//总记录数
            informationQuery:{} ,//条件封装对象
            info:'',
          
          }
      },
      created() { //页面渲染之前执行，一般调用methods定义的方法
          //调用
          if( this.$route.query.vulnType) {

this.informationQuery.vulnType=this.$route.query.vulnType
 this.getList()

} else {

 this.getList() 
}
      },
      methods:{  //创建具体的方法，调用teacher.js定义的方法
          //列表的方法
          getList(page=1) {
            this.page = page
              information.getInformationListPage(this.page,this.limit,this.informationQuery)
                  .then(response =>{//请求成功
                      //response接口返回的数据
                     
                       this.list = response.data
                      this.list1=this.list.content
                       console.log(this.list)   
                       console.log(this.list1) 
                      // console.log(this.total)
                  }) 
                  .catch(error=>{console.error();})//请求失败
          },
          resetData() {//清空的方法
              //表单输入项数据清空
              this.informationQuery = {}
              //查询所有数据
              this.getList()
          },
          //删除的方法
          removeDataById(id) {
              this.$confirm('此操作将永久删除信息记录, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {  //点击确定，执行then方法
                  //调用删除的方法
                  information.deleteInformationId(id)
                      .then(response =>{//删除成功
                      //提示信息
                      this.$message({
                          type: 'success',
                          message: '删除成功!'
                      });
                      //回到列表页面
                      this.getList()
                  })
              }) //点击取消，执行catch方法
          },
          //获取一级分类方法
         getOne(){
          informationApi. getInOne().then(response =>{//请求成功
                      //response接口返回的数据
                     this.info=response.data
                       console.log(response)   
                      
                      
                  }) 
         }
   
      }
  }
  </script>
  <style scoped>
  .active {
    background: #bdbdbd;
  }
  .hide {
    display: none;
  }
  .show {
    display: block;
  }
</style>